<template>
    <div class="content" @scroll="handleScroll">
        <div class="top-bar">
            <van-search
                    v-model="keyword"
                    placeholder="请输入搜索关键词"
                    slot="title"
                    background="transparent"
                    @search="onSearch"
            >
                <template slot="left-icon">
                    <van-icon name="search" />
                </template>
            </van-search>
        </div>
        <van-swipe :autoplay="3000" class="first-swipe">
            <van-swipe-item v-for="(item, index) in bannerList" :key="index">
                <img :src="item.picture ? item.picture : '@img/img-error.png'" />
            </van-swipe-item>
        </van-swipe>
        <div class="nav-wrapper">
            <div class="nav-container">
                <div class="nav">
                    <div v-for="(item, index) in firstNav" :key="index" class="nav-item" @click="formatNav(item)">
                        <img :src="item.icon" :class="index === 0 ? 'gif-icon' : 'icon'"/>
                        <div :class="index === 0 ? 'gif-title' : 'title'">{{item.title}}</div>
                    </div>
                </div>
                <div class="nav">
                    <div v-for="(item, index) in secondNav" :key="index" class="nav-item second-item" @click="formatNav(item)">
                        <img :src="item.icon" class="icon"/>
                        <div class="title">{{item.title}}</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="notice">
            <div class="content">
                <div class="icon">
                    <img :src="imgSrc[1]" />
                </div>
                <div class="title">
                    快报
                </div>
                <div class="notice-swipe-wrap">
                    <van-swipe :autoplay="10000" class="notice-swipe">
                        <van-swipe-item v-for="(item, index) in noticeList" :key="index" class="van-ellipsis">
                            {{item.content}}
                        </van-swipe-item>
                    </van-swipe>
                </div>
            </div>
        </div>
        <div class="vip-banner" @click="toVip">
            <img :src="vipBanner" />
        </div>
        <div class="goods-group">
            <van-row class="item" type="flex" justify="space-between">
                <van-col span="12" class="border-right">
                    <div class="h2">今日爆款</div>
                    <div class="title">爆款有料，今日抢</div>
                    <div class="list">
                        <div v-for="(item, index) in hotGoods" :key="index" class="van-ellipsis list-item">
                            <img :src="item.goodsThumb" />
                            <div class="price">
                                <span class="icon">￥</span>
                                <span class="title">{{item.originalPrice}}</span>
                            </div>
                        </div>
                    </div>
                </van-col>
                <van-col span="12">
                    <div class="h2">今日爆款</div>
                    <div class="title">爆款有料，今日抢</div>
                    <div class="list">
                        <div v-for="(item, index) in niceGoods" :key="index" class="van-ellipsis list-item">
                            <img :src="item.goodsThumb ? item.goodsThumb : imgSrc[3]" />
                            <div class="price">
                                <span class="icon">￥</span>
                                <span class="title">{{item.originalPrice}}</span>
                            </div>
                        </div>
                    </div>
                </van-col>
            </van-row>
        </div>
        <van-swipe :autoplay="3000" class="first-swipe">
            <van-swipe-item v-for="(item, index) in adList" :key="index">
                <img  v-bind:src="item.picture" />
            </van-swipe-item>
        </van-swipe>
        <div class="ten-goods">
            <div class="container">
                <div class="goods"  v-for="(item, index) in tenGoods" :key="index" >
                    <img :src="item.goodsThumb ? item.goodsThumb : imgSrc[3]" />
                    <div class="price">
                        <span class="icon">￥</span>
                        <span class="title">{{item.originalPrice}}</span>
                    </div>
                </div>
            </div>
        </div>
        <van-list
                v-model="loading"
                :finished="finished"
                finished-text="没有更多了"
                @load="onLoad"
                class="all-goods"
        >
            <div v-for="(item, index) in allGoods" :key="index" class="card" @click="toGoodsDetail(item)">
                <div class="thumb">
                    <img :src="item.goodsThumb ? item.goodsThumb : imgSrc[3]" />
                </div>
                <div class="info">
                    <div class="title">
                        <span v-if="item.goodsSale" class="tag">{{dict[item.goodsSale]}}</span>
                        <span class="name">{{item.goodsName}}</span>
                    </div>
                    <div class="reward">
                        赚 {{item.saleReward}}
                    </div>
                    <div class="price">
                        <span class="icon">￥</span>
                        <span class="num">{{item.beGroup === '0' ? item.originalPrice : item.originalGroupPrice}}</span>
                    </div>
                    <div class="sale">已售：{{item.salesNum}}件</div>
                </div>
            </div>
        </van-list>
        <div class="top-btn" @click="toTop" v-if="topBtnShow">
            <van-icon name="upgrade" size="40" color="#9E9E9E"/>
        </div>
    </div>
</template>

<script>
    import {Swipe,SwipeItem,NoticeBar,SwipeCell,List,Search} from 'vant';
    export default {
        name: 'indexPage',
        components: {
            [Swipe.name]: Swipe,
            [SwipeItem.name]: SwipeItem,
            [NoticeBar.name]:NoticeBar,
            [SwipeCell.name]:SwipeCell,
            [List.name]:List,
            [Search.name]:Search
        },
        data() {
            return {
                keyword:"",
                imgSrc: [
                    require("@img/app-logo.png"),
                    require('@img/noticePk.png'),
                    require('@img/img-error.png')
                ],
                bannerList:[],
                firstNav : [],
                secondNav : [],
                noticeList:[],
                vipBanner:[],
                hotGoods:[],
                niceGoods:[],
                adList:[],
                tenGoods:[],
                allGoods:[],
                loading: true,
                finished: false,
                list:[],
                offset:50,
                dict:['热门','最新', '精品', '爆款', '推荐'],
                page: this.$global.page,
                pages: this.$global.pages,
                size: this.$global.size,
                goodsList: [],
                topBtnShow:false
            }
        },

        created() {
           // console.log(window.localStorage.getItem("Authorization"))
           // console.log(window.localStorage.getItem("AppId"))
            this.getTopBanner();
            this.getNavList();
            this.getNoticeList();
            this.getVipBanner();
            this.getAdBanner();
            this.getGoodsList(3,1,2).then((res)=>{
                this.hotGoods = res.data.data.list;
            });
            this.getGoodsList(4,1,2).then((res)=>{
                this.niceGoods = res.data.data.list;
            })
            this.getGoodsList("",1,10).then((res)=>{
                this.tenGoods = res.data.data.list;
            })
            this.getAllGoods();
            this.initData()
        },
        computed: {
            user() {
                return this.$store.state.userInfo
            }

        },
        watch: {

        },
        mounted() {
            window.addEventListener('scroll', this.handleScroll);
        },
        methods: {
            //初始化数据
            initData() {
                this.getGoodsList()
            },
            onSearch(){
                this.$router.push({
                    path: "/search",
                    query:{
                        keyword : this.keyword
                    }
                })
            },
            //获取商品列表
            // getGoodsList() {
            //     this.$api.getGoodsInfoList({
            //         page: this.page,
            //         size: this.size
            //     }).then(res => {
            //         let result = this.$resArr(res);
            //         //console.log(result)
            //         if(result) {
            //             this.goodsList = result.list;
            //             this.pages = parseInt(result.pages);
            //         }
            //     })
            // },
            toGoodsDetail(obj) {
                this.$router.push({
                    path: "/goods/goodsDetail",
                    query: {
                        goodsId: obj.goodsId,
                    }
                })
            },
            toLogin() {
                this.$router.push({path: "/login"})
            },
            toVip(){
                //TODO
                this.$router.push({path: "/product/index"})
            },
            getTopBanner(){
                this.$api.getBanner(0).then((res)=>{
                    this.bannerList = res.data.data;
                });
            },
            getAdBanner(){
                this.$api.getBanner(2).then((res)=>{
                    this.adList = res.data.data;
                });
            },
            getNavList(){
                this.$api.getNavList().then((res)=>{
                    this.firstNav=res.data.data.splice(0,5);
                    this.secondNav=res.data.data;
                    //this.bannerList = res.data.data;
                });
            },
            getNoticeList(){
                this.$api.getNoticeList().then((res)=>{
                    this.noticeList = res.data.data;
                });
            },
            getVipBanner(){
                this.$api.getBanner(1).then((res)=>{
                    this.vipBanner = res.data.data[0].picture;
                });
            },
            getGoodsList(goodsSale,page,size){
                return this.$api.getGoodsInfoList({
                    "beGroup": "",
                    "categoryId": "",
                    "goodsName": "",
                    "goodsSale": goodsSale,
                    "navigation": "",
                    "page": page,
                    "shopId": "",
                    "size": size
                })
            },
            getAllGoods(){
                let self = this;
                this.page++;
                this.getGoodsList("",this.page,10).then((res)=>{
                    this.page = res.data.data.pageNum;
                    this.pages = res.data.data.pages;
                    if(res.data.data.list===[]){
                        self.finished = true;
                    }else{
                        self.allGoods.push(...res.data.data.list);
                        self.loading = false;
                    }
                })
            },
            onLoad(){
                if(this.page >= this.pages) {
                    this.finished = true
                }else {
                    this.getAllGoods("");
                }
            },
            formatNav(obj) {
                let query = {};
                let url = '/';
                if(obj.navType == '0'){
                    this.$router.push({
                        path: "/treasure/index"
                    });
                    return false;
                }
                if(obj.navType == '2'){
                    this.$router.push({
                        path: "/shop/shopList"
                    });
                    return false;
                }
                if(obj.navType == '5'){
                    this.$router.push({
                        path: "/category"
                    });
                    return false;
                }
                if(obj.navType == '1'){
                    switch (obj.title) {
                        case '美妆个护' :
                            query = {
                                fid:2,
                                sid:3,
                                tid:-1
                            }
                            break;
                        case '内衣服饰' :
                            query = {
                                fid:4,
                                sid:2,
                                tid:-1
                            };
                            break;
                        case '3C数码' :
                            query = {
                                fid:4,
                                sid:2,
                                tid:-1
                            };
                            break;
                        case '家居生活' :
                            query={
                                fid:11,
                                sid:1,
                                tid:-1
                            }
                            break;
                    }
                    this.$router.push({
                        path: "/categoryChild",
                        query:query
                    });
                    return false;
                }
                if(obj.navType === '6'){
                    this.$router.push({
                        path: "/index/allowance",
                    });
                    return false;
                }
                switch (obj.navType) {
                    case '0' :
                        url = "treasure/index";
                        break;
                    case '1' :
                        url = "index/category?";
                        break;
                    case '2' :
                        url = "shop/index";
                        break;
                    case '3' :
                        url = "/index/category?flag=new";
                        break;
                    case '4' :
                        url = "/index/category?flag=group";
                        break;
                    case '5' :
                        url = "/index/category";
                        break;
                    case '6' :
                        url = "/index/allowance";
                        break;
                }
                this.$router.push({
                    path: url,
                });
            },
            handleScroll(e){
                this.topBtnShow = e.target.documentElement.scrollTop > 750;
            },
            toTop(){
                window.pageYOffset = 0;
                document.body.scrollTop = 0;
                document.documentElement.scrollTop = 0 ;
            }
        }
    }
</script>

<style lang="scss" scoped>
    .content{
        .top-bar{
            height: 48px;
            display: flex;
            padding: 0 15px;
            background: var(--red-color);
            justify-content: center;
            justify-items: center;
            .van-search{
                background-color: transparent;
                border-radius: 50rem;
                padding:0;
                flex:0 0 80%;
                .van-search__content{
                    border-radius:  50rem;
                }
                .van-icon-search::before {
                    color: #969799;
                }

                .van-icon-search {
                    color: #969799;
                }
            }
        }
    }

    .first-swipe{
        margin: 8px 15px;
        height: 30vw;
        .van-swipe-item {
            border-radius: 8px;
            color: #fff;
            overflow: hidden;
            img{
                width: 100%;
                display: block;
                border-radius: 8px;
            }
        }
    }
    .nav-wrapper{
        padding: 0 15px;
        .nav-container{
            background-color: #ffffff;
            border-radius: 8px;
            .van-row{
                margin: 0;
            }
            .van-row--flex{
                margin:0;
            }
            .nav{
                margin: 0;
                display: flex;
                flex-flow: row;
                flex-wrap: wrap;
                justify-content: space-around;

                .nav-item{
                    width: 16.99999%;
                    margin-top:15px;
                    margin-bottom:15px;
                    text-align: center;
                    font-size:12px;
                    position: relative;
                    .icon{
                        width: 0.75rem;
                        height: 0.75rem;
                    }
                    .gif-icon{
                        width: 1rem;
                        position: absolute;
                        top: -0.15rem;
                        left: .2rem;
                    }
                    .title{
                        font-size: 0.2rem;
                    }
                    .gif-title{
                        margin-top: 0.8rem;
                    }
                }
                .second-item{
                    margin-bottom:15px;
                    margin-top:0px;
                }
            }
        }

    }
    .notice{
        padding: 8px 15px;
        .content{
            display: flex;
            justify-items: center;
            background-color: #ffffff;
            color: #1A1A1A;
            font-size: 12px;
            border-radius: 8px;
            padding: 8px 8px;
            .title{
                background-color: #D82D11;
                height: 21px;
                line-height: 19px;
                color: #ffffff;
                font-size: 12px;
                padding: 0 5px;
                flex: 0 0 24px;
            }
            .icon{
                width: 39px;
                flex: 0 0 39px;
                img{
                    width: 100%;
                    display: block;
                }
            }
            .notice-swipe-wrap{
                flex: 1;
                .notice-swipe{
                    padding: 2px 8px;
                    .van-swipe-item{

                    }
                }
            }
        }
    }
    .vip-banner{
        padding: 0 15px;
        border-radius: 8px;
        img{
            border-radius: 8px;
            width: 100%;
            display: block;
        }
    }
    .goods-group{
        margin-top: 8px;
        padding: 0px 15px;
        border-radius: 8px;
        .van-row{
            background-color: #ffffff;

            border-radius: 8px;
            margin:0;
            .border-right:after{
                content: "";
                width: 1px;
                border-right: 1px solid #f3f3f3;
                position: absolute;
                right: 0;
                top: 0;
                height: 100%;
            }
            .van-col{
                margin: 15px 0px;
                position: relative;
                padding: 0px 8px;
                .h2{
                    font-size: 15px;
                    font-weight: bold;
                }
                .title{
                    font-size: 12px;
                    color: #D82D11;
                    padding: 2px 0 8px;
                }
                .list{
                    display: flex;
                    justify-content: space-between;
                    .list-item{
                        img{
                            width: 1.3rem;
                            height: 1.3rem;
                            display: block;
                            border-radius: 8px;
                        }
                        .price{
                            text-align: center;
                            overflow: hidden;
                            padding: 3px 8px;
                            color: #D82D11;
                            .icon{
                                font-size: 12px;
                            }
                            .title{
                                font-weight: bold;
                                color: #D82D11;
                                font-size: 14px;
                            }
                        }
                    }
                }
            }
        }
    }
    .ten-goods{
        margin-top: 8px;
        padding: 0 15px;
        .container{
            display: flex;
            overflow-x: auto;
            padding: 15px 8px;
            background-color: #ffffff;
            border-radius: 8px;
            .goods{
                width: 1.3rem;
                flex: 0 0 1.3px;
                text-align: center;
                margin: 8px;
                img{
                    width: 1.3rem;
                    height: 1.3rem;
                    display: block;
                    border-radius: 8px;
                }
                .price{
                    text-align: center;
                    overflow: hidden;
                    padding: 3px 8px;
                    color: #D82D11;
                    .icon{
                        font-size: 12px;
                    }
                    .title{
                        font-weight: bold;
                        color: #D82D11;
                        font-size: 16px;
                    }
                }
            }
        }
    }
    .all-goods{
        padding: 0 15px;
        margin-top: 8px;
        .card{
            display: flex;
            padding: 8px;
            margin-bottom: 8px;
            border-radius: 8px;
            background-color: #ffffff;
            .thumb{
                width: 100px;
                height: 100px;
                flex:0 0 100px;
                overflow: hidden;
                object-fit: fill;
                img{
                    width: 100%;
                    height: 100%;
                    background-color: #ffffff;
                    display: block;
                    object-fit: fill;
                }
            }
            .info{
                margin-left: 8px;
                .tag{
                    display: inline-block;
                    background-color: #D82D11;
                    color: #ffffff;
                    font-size: 12px;
                    height: 20px;
                    line-height: 20px;
                    padding: 0 8px;
                    border-radius: 4px;
                    margin-right: 3px;
                }
                .title{
                    font-weight: bold;
                    line-height: 1.3;
                    height: 36px;
                    display: inline-block;
                    overflow: hidden;
                }
                .reward{
                    color: #D82D11;
                    font-size: 12px;
                }
                .price{
                    margin-top: 5px;
                    color: #D82D11;
                    .icon{
                        display: inline-block;
                        font-size: 12px;
                        transform: scale(.8);
                        margin-left: -2px;
                    }
                    .num{
                        font-weight: bold;
                    }
                }
                .sale{
                    color: #cccccc;
                    font-size: 12px;
                    object-fit: scale-down;
                }
            }
        }
    }
    .top-btn{
        position: fixed;
        right: 10px;
        bottom: 50px;
    }
</style>
